<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        .c1{
            font-size: 32px;
        }
        .c2{
            font-size: 32px;
        }
        .c3{
            /*
                rem表示相对于浏览器默认字体的倍数
                浏览器默认字体大小:16px
                2rem=2*16=32px
            */
            font-size: 2rem;
        }
        .c4{
            /*
                em表示相对于父元素字体大小的倍数
                此时父元素c1的字体大小为:32px
                2em=2*32=64px
            */
            font-size: 2em;
        }
        .c5{
            /*font-size: 16px;*/
            /*font-size: 1rem;*/
            font-size: 0.5em;
        }
        .c6{
            font-size: 32px;
            /*可以使用数字100-900,或者使用官方提供的固定单词*/
            font-weight: bold;
            font-family: '楷体';
            font-style: italic;
        }
        .c7{
            font-size: 32px;
            font-family: '宋体';
        }
        .c8{
            font: italic bold 32px '宋体';
        }
        .c9{
            font: italic bold 32px '宋体';
        }
    </style>
</head>
<body>
<div class="c1">
    这是c1
    <div class="c3">这是c3</div>
    <div class="c4">这是c4</div>
    <div class="c5">这是c5</div>
</div>
<div class="c2">这是c2</div>
<div class="c6">这是c6</div>
<div class="c7">这是c7</div>
<div class="c8">这是c8</div>
<div class="c9">这是c9</div>
</body>
</html>